<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <b>每月热榜</b>
        <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
      </div>
      <div class="text item">
        <div class="content" v-for="item in monthHot" :key="item.id" :style="item.images">
          <el-tag class="cloudN-tag" type="danger" size="small" effect="plain" v-if="item.flag.tag_name != ''">
            {{ item.flag.tag_name }}
          </el-tag>
          <a :href="'/essay/content' + '?articleid=' + item.article_id" :class="['hotTitle', item.flag.tag_name === '' ? 'none-a' : '']">{{ item.title }}</a>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      monthHot: []
    }
  },
  created () {
    this.loadMonthHot()
  },
  // DOM对象加载完成时
  mounted () {},
  methods: {
    async loadMonthHot () {
      var url = this.$config.urls.get('month_hot')
      const { data: res } = await this.$http.get(url)
      if (res.code !== 0) {
        console.log('请求失败！')
      } else {
        this.monthHot = res.data
        res.data.forEach(item => {
          item.images = 'background-image: url(' + item.images + ')'
        })
        // console.log(res.data)
        // console.log(this.monthHot)
      }
    }
  },
  computed: {},
  name: 'recommendedTopics'
}
</script>

<style lang="less" scoped>
.hotTitle {
  position: absolute;
  left: 105%;
  width: 180px;
  margin-top: 0;
  font-size: 14px;
  // 缩进
  text-indent: 3.5em;
  //行间距
  line-height: 25px;
  //只显示两行
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: 2;
  -moz-box-orient: vertical;
  word-wrap: break-word;
  white-space: normal;
}

.content {
  margin-top: 10px;
  //margin-right: 10px;
  width: 75px;
  height: 50px;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-shrink: 0;
  position: relative;
}
.cloudN-tag {
  position: absolute;
  left: 105%;
}
span {
  position: absolute;
}
.none-a {
  text-indent: 0em;
}
</style>
